<template>
    <div class="pc-page">
        <div class="app" v-cloak>
            <v-header></v-header>
            <keep-alive :include="include" :max="10">
                <router-view class="router" ref="router"></router-view>
            </keep-alive>
            <v-footer :type="footerType"></v-footer>
        </div>
        <div class="fixed-box">
            <div class="td-fcc td-fc">
                <img class="svg-serve" src="./assets/second_icon/gh_dc5ab23f577e_344.jpg" @mouseenter="MouseEnter(true)" @mouseleave="MouseLeave(false)"/>
            </div>
            <div class="td-fcc td-fc to-top hide transparent" @click="_toTop" ref="fixedBox">
                <img :src="$global.Image.icon_arrow_up" />
                <span>置顶</span>
            </div>
            <img src="./assets/second_icon/gh_dc5ab23f577e_344.jpg" class="fixed" alt="" v-if="qrcodeShow">
        </div>
    </div>
</template>
<script>
function isKeepAlive($route) {
    return $route.meta.keepAlive === undefined || $route.meta.keepAlive;
}
import Header from "@components/Header";
import Footer from "@components/Footer";
import { customer } from "@api/user";
import { getFooter } from "@api/public";
import { mapGetters } from "vuex";

export default {
    data() {
        return {
            transitionName: "fold-right",
            include: isKeepAlive(this.$route) ? [this.$route.name] : [],
            history: [],
            scrollTop: 0,
            clientHeight: 0,
            qrcodeShow:false,
            timer: "",
            footerType: "",
            totop: true,
            customerInfo: "", //客服信息
        };
    },
    provide() {
        return {
            app: this,
        };
    },
    computed: mapGetters(["footer", "home", "isLogin"]),
    components: {
        "v-header": Header,
        "v-footer": Footer,
    },
    watch: {
        $route(to, from) {
            if (to.meta.toTop === false) {
                this.totop = false;
            }
            const lastPath = this.history[this.history.length - 1] || {},
                { isReplace, isBack } = this.$router;

            if (lastPath.path === to.path) {
                this.transitionName = "fold-right";
                this.history.pop();
            } else {
                this.transitionName = "fold-left";
                if (!isReplace)
                    this.history.push({ path: from.path, name: from.name });
            }

            if (isKeepAlive(to) && to.name !== "Login") {
                !this.include.includes(to.name) && this.include.push(to.name);
            }

            if (isKeepAlive(from) && isBack) {
                var index = this.include.indexOf(from.name);
                index !== -1 && this.include.splice(index, 1);
            }

            this.$router.isBack = false;
            this.$router.isReplace = false;
        },
    },
    mounted() {
        var fixedBox = this.$refs["fixedBox"];
        window.addEventListener("scroll", () => {
            this.scrollTop = document.documentElement.scrollTop;
            if (this.scrollTop > 800) {
                fixedBox.classList.remove("hide");
                fixedBox.classList.remove("transparent");
            } else {
                fixedBox.classList.add("transparent");
                fixedBox.classList.add("hide");
            }
        });
        this.getCustomer();
    },
    created() {
        this.footerType = this.$route.meta.footer;
        if (this.$route.meta.toTop === false) {
            this.totop = false;
        }
    },
    methods: {
        MouseEnter(e){
            this.qrcodeShow = e;
        },
        MouseLeave(e){
            this.qrcodeShow = e;
        },
        _toTop() {
            this.scrollToptimer = setInterval(() => {
                var top =
                    document.body.scrollTop ||
                    document.documentElement.scrollTop;
                var speed = top / 4;
                if (document.body.scrollTop != 0) {
                    document.body.scrollTop -= speed;
                } else {
                    document.documentElement.scrollTop -= speed;
                }
                if (top == 0) {
                    clearInterval(this.scrollToptimer);
                }
            }, 30);
        },
        getCustomer() {
            getFooter().then((res) => {
                console.log(res);
                this.$store.commit("setFooterData", res.data);
            });
        },
        openCustomer() {
            window.open(this.customerInfo[0].dir, "_blank");
        },
    },
};
</script>
<style lang="scss">
@import "./assets/css/base.scss";
.pc-page {
    background-color: #fff;
    min-height: 100vh;
}
[v-cloak] {
    display: none !important;
}

.fold-left-enter-active {
    animation-name: fold-left-in;
    animation-duration: 0.5s;
}

.fold-left-leave-active {
    animation-name: fold-left-out;
    animation-duration: 0.5s;
}

@keyframes fold-left-in {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    10% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fold-left-out {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fold-right-enter-active {
    animation-name: fold-right-in;
    animation-duration: 0.5s;
}

.fold-right-leave-active {
    animation-name: fold-right-out;
    animation-duration: 0.5s;
}

@keyframes fold-right-in {
    0% {
        width: 100%;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    10% {
        width: 100%;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        width: 100%;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fold-right-out {
    0% {
        width: 100%;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10% {
        width: 100%;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        width: 100%;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}
.fixed-box {
    position: fixed;
    bottom: 300px;
    right: 20px;
    height: 200px;
    z-index: 90;
    opacity: 1;
    .fixed {
        position: fixed;
        right: 120px;
        bottom: 340px;
        widows: 200px;
        height: 200px;
    }
    div {
        width: 80px;
        height: 80px;
        overflow: hidden;
        border-radius: 50%;
        background-color: #fff;
        border: solid #eee 1px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.2;
        color: #666;
        margin-top: 16px;
        cursor: pointer;
        box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.1);
        transition: all 0.5s;
        img {
            display: block;
            width: 24px;
            height: 24px;
            object-fit: contain;
            margin-bottom: 4px;
        }
        .svg-serve {
            width: 70px;
            height: 70px;
            // margin-left: 5px;
            margin-bottom: 0;
        }
        .svg-top {
            width: 40px;
            height: 40px;
            margin-right: 5px;
            margin-bottom: 0;
        }
    }
}

.to-top.hide {
    display: none;
}
.to-top.transparent {
    opacity: 0;
}
</style>
